<template>
<div class="slug">
  <h1>Transport</h1>

  <h2>Imports</h2>
  <p><strong>WARNING&#58;</strong>
    This will destroy any existing data.
    You might want to export first.</p>
  <form @submit.prevent="replaceStateFromBlob(blob); blob=''">
    <input type="text" placeholder="json blob" v-model="blob" required />
    <button>Submit</button>
  </form>

  <h2>Exports</h2>
  <p><strong>WARNING&#58;</strong>
    Exposes all data including existing keys.</p>
  <button v-on:click="loadJson()">Get JSON</button>
  <p>
    <textarea v-model="theStateAsJson"></textarea>
  </p>

</div>
</template>

<script>
import {mapMutations, mapGetters} from "vuex"

export default {
    name: "Transport",
    data() {
        return {
            blob: '',
            theStateAsJson: ''
        }
    },
    computed: {
        ...mapGetters([
            "getState"
        ])
    },
    methods: {
        ...mapMutations([
            "replaceStateFromBlob"
        ]),
        loadJson: function() {
            this.theStateAsJson = JSON.stringify(this.getState, null, 1);
        }
    }
}
</script>

<style scoped>
textarea {
    background: #000000;
    color: #00ff00;
    height: 100px;
    max-width: 1024px;
    overflow: scroll;
    padding: 2px 4px;
    text-align: left;
    white-space: pre-wrap;
    width: 100%;
}
</style>
